<template>
  <div class="tabBar tabBar-wrap">
    <span :class="{'cur': currIndex === 0}">
      <router-link to="/">综合态势</router-link>
    </span>
    <span :class="{'cur': currIndex === 1}">
      <router-link to="/bhfb">病患分布</router-link>
    </span>
    <span :class="{'cur': currIndex === 2}">
      <router-link to="/yjdwfb">应急队伍分布</router-link>
    </span>
    <span :class="{'cur': currIndex === 3}">
      <router-link to="/Wzxqyfb">物资需求与分布</router-link>
    </span>
    <!-- <span>
      <router-link to="/yljgfb">医疗机构分布</router-link>
    </span>
    <span>
      <router-link to="/">测试默认页面</router-link>
    </span> -->
  </div>
</template>
<script lang="ts">
  import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

  @Component({
    name: 'TabBar'
  })
  export default class TabBar extends Vue {
    private currIndex: any = 0;
    private mounted() {
      this.onRouteChanged(this.$route);
    }
    @Watch('$route')
    private onRouteChanged(n: any) {
      if (n.path === '/') {
        this.currIndex = 0;
      }
      if (n.path.indexOf('bhfb') > -1) {
        this.currIndex = 1;
      }
      if (n.path.indexOf('yjdwfb') > -1) {
        this.currIndex = 2;
      }
      if (n.path.indexOf('Wzxqyfb') > -1) {
        this.currIndex = 3;
      }
      console.log(this.currIndex);
    }
  }
</script>
<style lang="less" scoped>
  @imgUrl: '../../assets/img/layout';

  .tabBar-wrap {
    position: absolute;
    top: 120px;
    left: 50%;
    z-index: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translate(-50%, 0px);

    &>span {
      background: url('@{imgUrl}/nav_bg.png') no-repeat 50% 0;
      height: 70px;
      width: 230px;
      display: inline-block;
      background-size: 100% 100%;
      line-height: 70px;
      text-align: center;
      color: #8cfffe;
      cursor: pointer;

      &.cur,
      &:hover {
        background-image:url('@{imgUrl}/nav_bg_h.png');
        color: #fff998;
      }

      &>a {
        color: inherit;
        text-decoration: none;
        font-size: 24px;
        letter-spacing: -0.1rem;
        display: block;
      }
    }
  }
</style>
